<!--
 * @Description: 
 * @Author: lwx
 * @Date: 2022-11-11 13:25:58
 * @LastEditors: lwx
 * @LastEditTime: 2023-04-27 17:17:47
-->
<template>
    <Echart
     :options="options"
     id="paramsChart"
     height="100%"
     width="100%"
    >
  </Echart>
</template>

<script>
import Echart from '@/common/echart'
export default {
  name: 'chart',
  components:{
      Echart
  },
  data() {
      return {
         options:{} ,
      }
  },
  computed:{
  
  },
  props:{
      cdata:{
        type: Object,
       default: () => ({}),
      }
  },
  watch:{
      cdata:{
         handler(newData){
         this.options = {
         grid: {
           top: "12%",
           left: "1%",
           right: "2%",
           bottom: "5%",
           containLabel: true,
         },
         tooltip: {
           trigger: 'axis',
           formatter:(params)=>{
             let str = '';
             for (let i = 0; i < params.length; i++) {
                str = str +
                `<span style='display:inline-block;margin-right:5px;
                border-radius:10px;width:10px;height:10px;background-color:${params[i].color}'></span>
                ${newData.x_unit}：${params[i].value[0]}<br/>
                <span style='display:inline-block;margin-right:5px;
                border-radius:10px;width:10px;height:10px;background-color:${params[i].color}'></span>
                ${newData.y_unit}：${params[i].value[1]}<br/>`;
            }
            return str;
           }
         },
         toolbox: {
           right:'5%',
           top:'-2%',
           feature: {
           dataView: {show: true, readOnly: false},
           saveAsImage: {show: true}
           }
          },
         legend: {
             show: false,
         },
         xAxis: {
             type: newData.x_unit==='时间'?'time':'value',  
             min:newData.x_min,
             max:newData.x_max,   
             boundaryGap: false,
             splitLine: {
                 show: true,
             },
             axisLabel: {
                 textStyle: {
                     color: '#556677',
                     fontSize: 12
                 },
             },
             axisLine: {
                 lineStyle: {
                     color: '#DCE2E8'
                 }
             },
             axisTick: {
                 show: false
             },
        
         },
         yAxis: {
             type: 'value',
             axisLabel: {
                 formatter: '{value}',
                 textStyle: {
                     color: '#666',
                     fontSize: 12
                 }
             },
             axisTick: {
                 show: false
             },
             min:newData.y_min,
             max:newData.y_max,
             axisLine: {
                 lineStyle: {
                     color: 'rgba(0,0,0,0.1)'
                 }
             },
             splitLine: {
                 show: true,
             }
         },
         series: [{
                 type: 'line',
                 symbol: 'circle',
                 symbolSize: 5,
                //  smooth: false,
                 showSymbol:false,
                 smooth:true,
                 data:newData.series_data,
                 name:newData.x_unit+'-'+newData.y_unit,
                 itemStyle: {
                     normal: {
                         color: '#6acca3',
                         width: 3
                     }
                 },

             },
          ]
         }; 
        },
        immediate:true,
        deep:true
      }
   },
   methods:{

   }
 }
</script>

<style lang = "scss" scoped>

</style>
